<!DOCTYPE html>
<html manifest="http://aleonlinespot.altervista.org/manifest.php">
    <head>
        <meta charset="utf-8" />
        <title>MyPhotoMemories</title>

        <link rel="icon" href="img/favicons/icon32.png">
        <link rel="shortcut icon" href="img/favicons/icon32.png">
        <link rel="apple-touch-icon" href="img/favicons/icon57.png" sizes="57x57">
        <link rel="apple-touch-icon" href="img/favicons/icon114.png" sizes="114x114">
        <link rel="apple-touch-icon" href="img/favicons/icon72.png" sizes="72x72">
        <link rel="apple-touch-icon" sizes="80x80" href="img/favicons/icon80.png">
        <link rel="apple-touch-icon-precomposed" sizes="android-only" href="img/favicons/icon57.png">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <!-- jQuery mobile -->      
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>   
        <!-- jQuery url plugin -->
        <script type="text/javascript" src="../jQuery/jquery.url.js"></script>
        <!-- Gmaps for reverse geocoding -->
        <script type="text/javascript"
                src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA8vPFux0WblXQfMbOpgEbDKWCGh0cEt58&sensor=true">
        </script>
        <!-- model -->
        <script src="../model/photo.js"></script>
        <script src="../model/album.js"></script>
        <!-- view -->
        <script type="text/javascript" src="draw.js"></script>
        <script type="text/javascript" src="effects.js"></script>
        <!-- controller -->
        <script src="../controller/dbController.js"></script>
        <script src="../controller/fileController.js"></script>
        <script src="../controller/locationController.js"></script>
        <script src="../controller/cacheController.js"></script>
        <script src="../controller/supportController.js"></script>
        <!-- init script -->
        <script src="initViews.js"></script>


        <!-- css -->
        <link rel="stylesheet" href="css/myStyle.css" />
        <link rel="stylesheet" href="css/graphics.css" />

    </head>
    <body>
        <div data-role="page" id="photoDetailsView">

            <!-- init script -->
            <script>
                var p;
                var path;
                var albumId;

                
                $("#photoDetailsView").bind('pagebeforeshow', function(){
                    console.log("photoDetailsView pagebeforeshow");
                    
                    $.mobile.showPageLoadingMsg("a", "Loading image...");

                    //get from querystring 
                    var u = $.url(); // parse the current page URL
                    
                    //var name = u.param("name"); 
                    var name = sessionStorage.tmpName;
                    tmpName = null;
                    path = dbCon.server+"/upload/"+name;
                    
                    albumId = sessionStorage.aid;

                    $("#PDVpreview").attr("src", path);
                    
                    //if there is a saved temp photo (because a popup was opened)
                    if (sessionStorage.tempPhoto && sessionStorage.tempPhoto != null && sessionStorage.tempPhoto != "null"){
                    	console.log("PDV: restoring");
                    	restorePDV();
                    } 
                    
                    if (sessionStorage.loc != null && sessionStorage.loc != "null"){
                        $("#PDVlocation").val(sessionStorage.loc);
                        sessionStorage.loc = null;
                    }
                    
                    var img = document.getElementById("PDVpreview");
                    img.onload = function(){
                        $.mobile.hidePageLoadingMsg();
                    }
                    
                    if (!sCon.checkGeolocationSupport()){
                        $("#PDVgetLocation").hide();
                    }
                });
                
            </script>

            <div data-role="header">
                <div class="logo">
                    <img src="img/logo/logo.png" alt="MyPhotoMemories"/>
                    <div class="rightHeader">
                        <a href="index.html"  data-role="button" data-icon="home"  data-iconpos="notext"></a>
                    </div>
                </div>
            </div>
            <div data-role="content" class="canScroll">
                <figure>
                    <img id="PDVpreview" class="thumb" src="img/album/camera_big.png"/>
                </figure>
                <form name="newPhoto">
                    <div data-role="fieldcontainer">
                        <label for="PDVname">Name</label>
                        <input type="text" id="PDVname" name="name"/>
                    </div>
                    <div data-role="fieldcontainer">
                        <label for="PDVdescription">Description</label>
                        <input type="text" id="PDVdescription" name="description"/>
                    </div>
                    <div data-role="fieldcontainer">
                        <label for="PDVlocation">Location</label>
                        <input type="text" id="PDVlocation" name="location"/>
                        <a data-rel="dialog" data-role="button" class="ui-corner-all" id="PDVgetLocation">Get Location</a>
                    </div>
                    <div data-role="fieldcontainer">
                        <label for="PDVcontacts">With</label>
                        <input type="text" id="PDVcontacts" name="contacts"/>
                    </div>
                </form>

                <!-- geolocation -->
                <div data-role="dialog" id="PDVlocationPopup" data-overlay-theme="d" data-theme="c" style="max-width:500px;" class="ui-corner-all">

                    <div data-role="header" data-theme="d" class="ui-corner-top">
                        <h1>Where are you?</h1>
                    </div>
                    <div data-role="content" data-theme="d" style="padding:15px;" class="ui-corner-bottom">
                        <h3>Choose a location</h3>
                        <p id="PDVgeoWarning" class="error">Warning: this seems very inaccurate</p>
                        <ul id="PDVlocList" data-role="listview" data-inset="true" data-theme="a">
                            <li id="PDVli0"><a id="PDVitem0" class="ui-corner-all">1</a></li>
                            <li id="PDVli1"><a id="PDVitem1" class="ui-corner-all">2</a></li>
                            <li id="PDVli2"><a id="PDVitem2" class="ui-corner-all">3</a></li>
                            <li id="PDVli3"><a id="PDVitem3" class="ui-corner-all">4</a></li>
                            <li id="PDVli4"><a id="PDVitem4" class="ui-corner-all">5</a></li>
                        </ul>
                    </div>
                </div>
                <!-- geolocation -->

            </div>
            <div data-role="footer" data-position="fixed">
                <a href="albumView.html" data-role="button">Cancel</a>
                <a id="PDVsaveButton" href="albumView.html" data-role="button">Save</a>
            </div>
        </div>        


    </body>


</html>

